<template>
	<view class="classify-layout page-bg">
		<custom-nav-bar>分类</custom-nav-bar>
		<view class="classify">
			<theme-item v-for="item in classifyList" :key="item._id" :classify="item"></theme-item>
		</view>
		
		<uni-load-more v-if="loading" style="margin-top: 30rpx;" status="loading"></uni-load-more>
		<view v-else class="text has-no-more">到底了~</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { reqIndexClassify } from '@/apis/classify.js'
import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';

let classifyList = ref([])
let searchForm = ref({
	pageNum: 1,
	pageSize: 15
})
let loading = ref(true)
onMounted(() => {
	initClassifyList()
})

const initClassifyList = async () => {
	const { data } = await reqIndexClassify(searchForm.value)
	classifyList.value = [...classifyList.value, ...data]

	if(!data || data.length == 0){
		loading.value = false
	}
}

// 触底加载更多
onReachBottom(() => {
	if(!loading.value){
		return
	}
	searchForm.value.pageNum ++
	initClassifyList()
})

	// 下拉刷新
	onPullDownRefresh(() => {
		classifyList.value = []
		searchForm.value.pageNum = 1
		initClassifyList()
		uni.stopPullDownRefresh()
	})
</script>

<style lang="scss" scoped>
.classify-layout{
	width: 100%;
	padding: 0 30rpx;
	padding-bottom: 30rpx;
	.classify{
		padding-top: 20rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx;
	}
	.has-no-more{
		text-align: center;
		color: $text-font-color-3;
		line-height: 100rpx;
	}
}
</style>
